import React, { useState, useEffect } from "react";
import { Modal, Input, Button } from "antd";
import "./showDetailsModal.css";

const ShowDetails = (props) => {
  const { open, title, details, SetDetailsOpenObj, type } = props;
  //   const pdfPath = "../static/dome.pdf";
  const [remark, setRemark] = useState(details.remark || undefined);
  const [pdfBlob, setPdfBlob] = useState(null);

  console.log(details);
  useEffect(() => {
    fetch(`http://localhost:8989/file?tandard_no=${details?.standard_no}`, {
      headers: {
        "Content-Type": "application/pdf",
      },
    }).then((response) => {
      const blob = response.blob();
      blob.then((data) => {
        const blobs = new Blob([data], {
          type: "application/pdf",
        });
        let testUrl = window.URL.createObjectURL(blobs); //转成链接

        // setPdfFile(testUrl);
        getImageBase64(blobs).then((base64) => {
          setPdfBlob(testUrl);
        });
      });
    });
  }, [open]);

  const getImageBase64 = (blob) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = () => {
        const base64 = reader.result;
        resolve(base64);
      };
      reader.onerror = (error) => reject(error);
    });
  };

  const changeRemanck = (remack) => {
    setRemark(remack.target.value);
  };

  const upDataReamck = () => {
    const { setRemackApiFunc } = window.electron;

    setRemackApiFunc({ id: details?.id, remark: remark }).then((result) => {
      SetDetailsOpenObj({ open: false });
    });
  };

  return (
    <Modal
      onOk={() => SetDetailsOpenObj({ open: false })}
      onCancel={() => SetDetailsOpenObj({ open: false })}
      className="showDetailsModal"
      styles={{ width: "1000px", height: "800px" }}
      open={open}
      title={title}
      footer={null}
      maskClosable={false}
    >
      <div className="showDetailsBox">
        <div className="pdfView">
          <iframe
            src={pdfBlob + `#page=${details?.term_name_page - 1 + 2}`}
            width={500}
            height={500}
          />
        </div>
        <div className="textView">
          <div className="datailsRow">
            <div className="label">术语中文名:</div>
            <div className="value">{details?.term_name}</div>
          </div>
          <div className="datailsRow">
            <div className="label">术语英文名:</div>
            <div className="value">{details?.term_ename}</div>
          </div>
          <div className="datailsRow">
            <div className="label">标准名称:</div>
            <div className="value">{details?.standard_name}</div>
          </div>
          <div className="datailsRow">
            <div className="label">标准编号:</div>
            <div className="value">{details?.standard_no}</div>
          </div>
          {type === "inset" ? (
            <div className="datailsRow">
              <div className="label">修改建议</div>
              <Input value={remark} onChange={changeRemanck}></Input>
              <Button style={{ marginTop: "8px" }} onClick={upDataReamck}>
                提交意见
              </Button>
            </div>
          ) : (
            <div className="datailsRow">
              <div className="label">修改意见:</div>
              <div className="value">{details?.remark}</div>
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
};

export default ShowDetails;
